Vue.component("answer-com", {
    template: `<div class="answer-com">
                    <span v-for="item,index in list" v-if="index===indexVal">{{item.id}}：{{item.text}}。({{item.grade}}分)</span>
                    <ul>
                        <li v-for="item,index in list" v-if="index===indexVal">
                            A： <input type="radio" v-model="item.keyVal" value="A" id="A" name="key"><label for="A">{{item.options.A}}</label><br>
                            B： <input type="radio" v-model="item.keyVal" value="B" id="B" name="key"><label for="B">{{item.options.B}}</label><br>
                            C： <input type="radio" v-model="item.keyVal" value="C" id="C" name="key"><label for="C">{{item.options.C}}</label><br>
                            D： <input type="radio" v-model="item.keyVal" value="D" id="D" name="key"><label for="D">{{item.options.D}}</label><br>
                        </li>
                    </ul>
                </div>`,
    data() {
        return {
            list: [
                { id: 1, text: "当前这道题是什么鬼1", keyVal: "", grade: 5, options: { A: "当前这道题是1A", B: "当前这道题是1B", C: "当前这道题是1C", D: "当前这道题是1D", }, key: "A" },
                { id: 2, text: "当前这道题是什么鬼2", keyVal: "", grade: 7, options: { A: "当前这道题是2A", B: "当前这道题是2B", C: "当前这道题是2C", D: "当前这道题是2D", }, key: "C" },
                { id: 3, text: "当前这道题是什么鬼3", keyVal: "", grade: 10, options: { A: "当前这道题是3A", B: "当前这道题是3B", C: "当前这道题是3C", D: "当前这道题是3D", }, key: "C" },
                { id: 4, text: "当前这道题是什么鬼4", keyVal: "", grade: 3, options: { A: "当前这道题是4A", B: "当前这道题是4B", C: "当前这道题是4C", D: "当前这道题是4D", }, key: "A" }
            ],
            indexVal: 0
        }
    },
    mounted () {
        bus.$on("upFn", () => {
            if (this.indexVal <= 0) {
                alert("已经是第一题了")
            } else {
                this.indexVal --
            }
        })
        bus.$on("nextFn", () => {
            if (this.indexVal >= this.list.length - 1) {
                alert("已经是最后一题了")
            } else {
                this.indexVal ++
            }
        })
        var _this = this
        bus.$on("submitFn", () => {
            var _tag = true
            this.list.forEach(val => {
                if (val.keyVal === "") {
                    _tag = false
                }
            });
            if (_tag) {
                bus.$emit("setTemp", "end-com", "")
                setTimeout(() => {
                    bus.$emit("showResult", _this.list)
                }, 0);
            } else {
                alert("您有题没有完成  我建议您完成它")
            }
        })
    }
})

Vue.component("answer-btn-com", {
    template: `<div class="answer-btn-com">
                    <span @click="upFn">上一题</span>
                    <span @click="nextFn">下一题</span>
                    <span @click="submitFn">交卷</span>
                </div>`,
    methods: {
        upFn() {
            bus.$emit("upFn")
        },
        nextFn() {
            bus.$emit("nextFn")
        },
        submitFn() {
            bus.$emit("submitFn")
        }
    }
})
